{extend name="layout/plugin_layout" /}

{block name="title"}{$plugin.title} - {$app.title}{/block}
{block name="main"}
<div class="container mx-auto" id="app">
    <div class="card lg:card-side bordered shadow-lg flex flex-col">
        <div class="card-body">
            <div class="mb-4 w-full" id="player"></div>
            <div class="alert shadow-lg bg-base-200/30">
                <div class="flex-1">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="#2196f3"
                         class="w-6 h-6 mx-2">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    <label>支持mp4、hls、flv、ts等视频播放，不支持跨域</label>
                </div>
            </div>
            <div class="form-control">
                <label class="cursor-pointer label">
                    <span class="label-text">直播</span>
                    <input v-model="options.live" type="checkbox" class="toggle">
                </label>
            </div>
            <div class="form-control">
                <label class="label">
                    <span class="label-text">播放链接</span>
                </label>
                <input v-model="options.url" type="text" placeholder="请输入播放链接"
                       class="input input-bordered">
            </div>
            <button class="btn btn-primary btn-block" @click="play">播放</button>
        </div>
    </div>
</div>
<script type="text/javascript" charset="utf-8" src="{:cdnjs_cdn()}/dplayer/1.27.0/DPlayer.min.js"></script>
<script type="text/javascript" charset="utf-8" src="{:cdnjs_cdn()}/hls.js/1.2.4/hls.min.js"></script>
<script type="text/javascript" charset="utf-8" src="{:cdnjs_cdn()}/flv.js/1.6.2/flv.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            player: null,
            options: {
                url: '{:request()->get("url")}' || '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/hls/xgplayer-demo.m3u8',
                autoplay: true,
                theme: '#FADFA3',
                lang: 'zh-cn',
                screenshot: true,
                hotkey: true,
                preload: 'auto',
                volume: 0.7,
                mutex: true,
                live: false,
            }
        },
        watch: {
            'options.live'() {
                this.play()
            }
        },
        mounted() {
            this.play()
        },
        methods: {
            play() {
                this.player?.destroy()
                const extension = this.options.url.slice(this.options.url.lastIndexOf('.') + 1)
                switch (extension) {
                    case 'm3u8':
                        this.options.type = 'hls'
                        break;
                    case 'flv':
                        this.options.type = 'flv.js'
                        break;
                }
                this.player = new DPlayer({
                    container: document.getElementById('player'),
                    video: this.options,
                    live: this.options.live,
                });
            }
        },
    })
</script>

{/block}
